<template>
    <div class="supervision-platform">
      <!-- 顶部标题栏 -->
      <van-nav-bar title="监管平台" fixed placeholder />
  
      <!-- 内容区域 -->
      <div class="content">
        <!-- 标题 -->
        <h2 class="section-title">代班选择</h2>
        
        <!-- 当前班次信息 -->
        <van-cell-group inset class="info-group">
          <van-cell title="班长" />
          <van-cell title="代班长" :value="substituteLeader || '无'" />
          <van-divider />
          <van-cell title="开始时间" :value="startTime" />
          <van-cell title="结束时间" :value="endTime" />
        </van-cell-group>
  
        <!-- 选择区域 -->
        <h3 class="sub-title">选择代班长和时间</h3>
        
        <!-- 代班长选择 -->
        <van-field
          v-model="selectedLeaderName"
          is-link
          readonly
          label="代班长"
          placeholder="请选择代班长"
          @click="showLeaderPicker = true"
          class="selection-field"
        />
        
        <!-- 时间选择 -->
        <van-field
          v-model="startTime"
          is-link
          readonly
          label="开始时间"
          @click="showStartTimePicker = true"
          class="selection-field"
        />
        <van-field
          v-model="endTime"
          is-link
          readonly
          label="结束时间"
          @click="showEndTimePicker = true"
          class="selection-field"
        />
  
        <!-- 操作按钮 -->
        <div class="action-buttons">
          <van-button 
            round 
            size="large" 
            type="default" 
            class="cancel-btn"
            @click="onCancel"
          >
            取消
          </van-button>
          <van-button 
            round 
            size="large" 
            type="primary" 
            class="confirm-btn"
            @click="onConfirm"
          >
            确定
          </van-button>
        </div>
  
        <!-- 选择器弹窗 -->
        <van-popup v-model:show="showLeaderPicker" round position="bottom">
          <van-picker
            :columns="leaderOptions"
            @confirm="onLeaderConfirm"
            @cancel="showLeaderPicker = false"
          />
        </van-popup>
        
        <van-popup v-model:show="showStartTimePicker" round position="bottom">
          <van-date-picker
            v-model="currentStartDate"
            @confirm="onStartTimeConfirm"
            @cancel="showStartTimePicker = false"
          />
        </van-popup>
        
        <van-popup v-model:show="showEndTimePicker" round position="bottom">
          <van-date-picker
            v-model="currentEndDate"
            @confirm="onEndTimeConfirm"
            @cancel="showEndTimePicker = false"
          />
        </van-popup>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  
  // 代班长选项
  const leaderOptions = [
    { text: '张三', value: 'zhangsan' },
    { text: '李四', value: 'lisi' },
    { text: '王五', value: 'wangwu' }
  ];
  
  // 状态管理
  const selectedLeader = ref('');
  const selectedLeaderName = ref('无');
  const substituteLeader = ref('无');
  const showLeaderPicker = ref(false);
  
  // 时间管理
  const startTime = ref('2022-02-09');
  const endTime = ref('2022-02-09');
  const currentStartDate = ref(['2022', '02', '09']);
  const currentEndDate = ref(['2022', '02', '09']);
  const showStartTimePicker = ref(false);
  const showEndTimePicker = ref(false);
  
  // 选择确认
  const onLeaderConfirm = ({ selectedOptions }) => {
    selectedLeader.value = selectedOptions[0]?.value;
    selectedLeaderName.value = selectedOptions[0]?.text;
    substituteLeader.value = selectedOptions[0]?.text;
    showLeaderPicker.value = false;
  };
  
  const onStartTimeConfirm = ({ selectedValues }) => {
    startTime.value = selectedValues.join('-');
    showStartTimePicker.value = false;
  };
  
  const onEndTimeConfirm = ({ selectedValues }) => {
    endTime.value = selectedValues.join('-');
    showEndTimePicker.value = false;
  };
  
  // 按钮操作
  const onCancel = () => {
    router.back(); // 返回上一页
  };
  
  const onConfirm = () => {
    console.log('代班设置成功', {
      leader: selectedLeader.value,
      startTime: startTime.value,
      endTime: endTime.value
    });
    router.back(); // 提交后返回
  };
  </script>
  
  <style scoped>
  .supervision-platform {
    padding: 16px;
    background-color: #f7f8fa;
    min-height: 100vh;
  }
  
  .content {
    margin-top: 12px;
  }
  
  .section-title {
    font-size: 18px;
    font-weight: bold;
    color: #323233;
    margin: 16px 0 12px;
    padding-left: 8px;
  }
  
  .sub-title {
    font-size: 16px;
    color: #646566;
    margin: 24px 0 12px;
    padding-left: 8px;
  }
  
  .info-group {
    margin-top: 8px;
  }
  
  .selection-field {
    margin-top: 12px;
  }
  
  .action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding: 0 16px;
  }
  
  .cancel-btn {
    flex: 1;
    background: #f7f8fa;
  }
  
  .confirm-btn {
    flex: 1;
  }
  </style>